import React, { Component } from 'react';
import store from '../../store';
import { loginStatusActionCreate } from '../../store/action/action';
import { Checkbox, Toast } from 'antd-mobile';
import { Link, withRouter } from 'react-router-dom';
import './Login.less';

const AgreeItem = Checkbox.AgreeItem;

class Login extends Component {

    constructor(props) {
        super(props);
        let username = window.localStorage.getItem('username') || '';
        let password = window.localStorage.getItem('password') || '';
        let checked = window.localStorage.getItem('checked') || '';
        this.state = {
            checked: checked,
            username,
            password
        };

        this.onSubmit = React.$utils.throttle(this.onSubmit, 2000);
        document.documentElement.style.backgroundColor = '#fff'
        document.body.style.backgroundColor = '#fff'

    }

    onUsernameChange = (event) => {
        let value = event.currentTarget.value
        this.setState({
            username: value
        });
    }

    onPasswordChage = (event) => {
        let value = event.currentTarget.value
        this.setState({
            password: value
        })
    }

    validate = (callback) => {
        let {
            username,
            password
        } = this.state;
        let msg = '';
        if (!React.$utils.validatePhone(username)) {
            msg = '请输入正确的账号'
        } else if (!password) {
            msg = '请输入密码'
        }
        if (msg) {
            Toast.fail(msg);
        } else {
            callback && callback();
        }
    };

    onBlur = () => {
        window.scrollTo(0, 0);
    };
    onFocus = (e) => {
        let target = e.currentTarget;
        setTimeout(function () {
            target.scrollIntoViewIfNeeded();
        }, 400);
    }

    onSubmit = () => {
        this.validate(() => {
            let {
                username,
                password,
                checked
            } = this.state
            React.$utils.request({
                url: '/api/login',
                method: 'post',
                data: {
                    phone: username,
                    password
                }
            }).then(res => {
                if (checked) {
                    window.localStorage.setItem('username', username);
                    window.localStorage.setItem('password', password);
                    window.localStorage.setItem('checked', checked);
                } else {
                    window.localStorage.setItem('username', '');
                    window.localStorage.setItem('password', '');
                    window.localStorage.setItem('checked', '');
                }
                store.dispatch(loginStatusActionCreate(false));
                this.props.history.replace('/')
            })
        })
    };

    render() {
        return (
            <div className='login'>
                <div className='login-content'>
                    <div className='login-image-container'>
                        <img className='login-image' src={require('../../images/home_img.png')} alt="" />
                    </div>

                    <div className='logo-container'>
                        <img className='logo-image' src={require('../../images/logo.png')} alt="" />
                    </div>


                    <div className='login-main'>

                        <div className='login-title'>
                            <span className='login-title-text'>赚钱省心的移动支付管家</span>
                        </div>

                        <div className='login-form'>
                            <div className='login-acount'>
                                <img className='input-icon' src={require('../../images/icon_1.png')} alt="" />
                                <input type="text" className='login-input' value={this.state.username} onChange={this.onUsernameChange} onBlur={this.onBlur} onFocus={this.onFocus} />
                            </div>
                            <div className='login-password'>
                                <img className='input-icon' src={require('../../images/icon_2.png')} alt="" />
                                <input type="password" className='login-input' value={this.state.password} onChange={this.onPasswordChage} onBlur={this.onBlur} onFocus={this.onFocus} />
                            </div>
                        </div>

                        <div className='agree-container'>
                            <AgreeItem onClick={() => { this.setState({ checked: !this.state.checked }) }} checked={this.state.checked}>
                                <span className='agree-text'>记住密码</span>
                            </AgreeItem>
                        </div>
                        <div className='submit-container'>
                            <div className='button' onClick={this.onSubmit}>立即登录</div>
                        </div>
                        <div className='forget-contianer'>
                            <Link to='/forget'>忘记密码</Link>
                        </div>
                    </div>
                </div>

            </div>
        );
    };
    componentWillUnmount() {
        document.documentElement.style.backgroundColor = '#f5f5f5'
        document.body.style.backgroundColor = '#f5f5f5'
    }
}

export default withRouter(Login)